<script setup>
defineProps({
  testimonials: Array
})
</script>

<template>
  <section class="testimonials">
    <h2>家长评价</h2>
    <div class="testimonial-list">
      <div v-for="testimonial in testimonials" :key="testimonial.author" class="testimonial-item">
        <blockquote>
          "{{ testimonial.content }}"
        </blockquote>
        <p class="author">—— {{ testimonial.author }}</p>
      </div>
    </div>
  </section>
</template>

<style scoped>
.testimonials {
  padding: 2rem 0;
  text-align: center;
}

.testimonial-list {
  display: grid;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-item {
  background: var(--vp-c-bg-soft);
  padding: 1.5rem;
  border-radius: 8px;
}

blockquote {
  font-style: italic;
  color: var(--vp-c-text-2);
}

.author {
  margin-top: 1rem;
  font-weight: bold;
  color: var(--vp-c-text-1);
}
</style>
